<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span>
                {{$t('mertnam')}}
                <el-input v-model.trim="merAccTab.merName" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <!-- <span>
                {{$t('mertid')}}
                <el-input v-model="merAccTab.merId" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span> -->
            <span class="seachStatus">
               {{$t('acctsta')}}
                <el-select v-model="merAccTab.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachMerAcc" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="id" :data="merAccForm" :tree-props="{children: 'listVos', hasChildren: 'hasChildren'}">
                <el-table-column prop="merName" :label="$t('mertnam')">
                </el-table-column>
                <el-table-column prop="accId" :label="$t('accountid')">
                </el-table-column>
                <el-table-column prop="accType" :label="$t('acctype')">
                </el-table-column>
                <el-table-column prop="amt" :label="$t('accamt')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('acctsta')">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="ledgerAcc(scope.row.merName)" v-if="scope.row.listVos">{{$t('ledger')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="merAccTab.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="merAccTab.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    meracclist
} from '@/libs/reqlist.js'
import Cookies from 'js-cookie'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            jsq: 1,
            merAccTab: {
                merId: null,
                status: null,
                merName: null,
                pageSize: 10,
                pageNum: 1
            },
            merAccForm: [],
            operAcc: {
                accId: null,
                merId: null,
                merName: null,
                accType: null,
                amt: null,
                status: null,
                remark: null
            },
            operAccRul: {
                remark: [
                    { required: true, message: this.$t('notecantbeemt'), trigger: 'blur' }
                ]
            },
            freezeDialogVisible: false,
            unfreezeDialogVisible: false
        }
    },
    methods: {
        async getmerAccForm () {
            await meracclist(JSON.stringify(this.merAccTab)).then(res => {
                this.merAccForm = res.data.data.list
                this.total = res.data.data.total - 0
                this.merAccForm.forEach(item => {
                    item.id = this.jsq++
                    item.listVos.forEach(key => {
                        key.id = this.jsq++
                        if (key.status === 'VALID') key.status = this.$t('vlid')
                        if (key.status === 'INVALID') key.status = this.$t('invlid')
                        if (key.status === 'FROZEN') key.status = this.$t('frze')
                        if (key.status === 'CLOSED') key.status = this.$t('cancellation')
                        if (key.accType === 'CLEARING') key.accType = this.$t('clearacc')
                        if (key.accType === 'SETTLE') key.accType = this.$t('setacc')
                        if (key.accType === 'RECHARGE') key.accType = this.$t('rechargeacc')
                        if (key.accType === 'FROZEN') key.accType = this.$t('frozenacc')
                        if (key.accType === 'SHARE_PROFIT') key.accType = this.$t('dividendsacc')
                        if (key.accType === 'LOCKED') key.accType = this.$t('lockacc')
                        if (key.accType === 'REFUND_LOCKED') key.accType = this.$t('refundlockaccount')
                        if (key.accType === 'SETTLE_LOCKED') key.accType = this.$t('settlementlockaccount')
                        if (key.accType === 'FEE_IN') key.accType = this.$t('commissionacc')
                    })
                })
            })
        },
        handleSizeChange (newSize) {
            this.merAccTab.pageSize = newSize
            this.getmerAccForm()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.merAccTab.pageNum = newNum
            this.getmerAccForm()
        },
        seachMerAcc () {
            this.merAccTab.pageNum = 1
            this.getmerAccForm()
        },
        ledgerAcc (merName) {
            Cookies.set('meraccname', merName)
            this.$router.push('/sec/merledger')
        }
    },
    mounted () {
        this.getmerAccForm()
    }
}
</script>

<style lang="less" scoped>
@import './merAcc.less';
</style>
